<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发布旅游日记 - 个性化旅游系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <!-- 引入Quill编辑器 -->
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
    <script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            min-height: 100vh;
            background-color: #f5f5f5;
            padding: 30px;
        }
        .container {
            max-width: 1000px;
            margin: 0 auto;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            padding: 30px;
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
        }
        .container.loaded {
            opacity: 1;
        }
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
        }
        .title {
            font-size: 24px;
            color: #9b59b6;
        }
        .back-button {
            background-color: #f1f1f1;
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 8px 15px;
            cursor: pointer;
            display: flex;
            align-items: center;
            transition: background-color 0.3s;
        }
        .back-button:hover {
            background-color: #e5e5e5;
        }
        .back-icon {
            margin-right: 5px;
        }
        .form-group {
            margin-bottom: 20px;
        }
        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: #333;
        }
        .form-input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
        }
        .form-input:focus {
            outline: none;
            border-color: #9b59b6;
        }
        .editor-container {
            height: 400px;
            margin-bottom: 20px;
        }
        .submit-button {
            background-color: #9b59b6;
            color: white;
            border: none;
            border-radius: 5px;
            padding: 12px 25px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .submit-button:hover {
            background-color: #8e44ad;
        }
        .submit-button:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }
        .error-message {
            color: #e74c3c;
            margin-top: 5px;
            font-size: 14px;
        }
        .success-message {
            color: #2ecc71;
            margin-top: 5px;
            font-size: 14px;
        }
        .loading {
            display: none;
            text-align: center;
            margin-top: 20px;
        }
        .loading i {
            color: #9b59b6;
            font-size: 24px;
        }
        .page-loading {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #f5f5f5;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: opacity 0.3s ease-in-out;
        }
        .page-loading.hidden {
            opacity: 0;
            pointer-events: none;
        }
        .page-loading-content {
            text-align: center;
        }
        .page-loading i {
            font-size: 40px;
            color: #9b59b6;
            margin-bottom: 20px;
        }
        .page-loading p {
            color: #666;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <!-- 页面加载遮罩 -->
    <div class="page-loading" id="pageLoading">
        <div class="page-loading-content">
            <i class="fas fa-spinner fa-spin"></i>
            <p>正在加载...</p>
        </div>
    </div>

    <div class="container" id="mainContainer">
        <div class="header">
            <h1 class="title"><i class="fas fa-pen-nib" style="margin-right: 10px;"></i>发布旅游日记</h1>
            <button class="back-button" onclick="window.location.href='dashboard.html'">
                <i class="fas fa-arrow-left back-icon"></i> 返回
            </button>
        </div>
        
        <form id="diaryForm" onsubmit="submitDiary(event)">
            <div class="form-group">
                <label class="form-label" for="diaryTitle">日记标题</label>
                <input type="text" id="diaryTitle" class="form-input" required 
                       placeholder="请输入日记标题" maxlength="100">
            </div>
            
            <div class="form-group">
                <label class="form-label" for="destination">旅游目的地</label>
                <input type="text" id="destination" class="form-input" required 
                       placeholder="请输入旅游目的地" maxlength="100">
            </div>
            
            <div class="form-group">
                <label class="form-label">日记内容</label>
                <div id="editor" class="editor-container"></div>
            </div>
            
            <div id="errorMessage" class="error-message"></div>
            <div id="successMessage" class="success-message"></div>
            
            <div class="loading" id="loading">
                <i class="fas fa-spinner fa-spin"></i> 正在保存...
            </div>
            
            <button type="submit" class="submit-button" id="submitButton">
                发布日记
            </button>
        </form>
    </div>

    <script>
        // 初始化Quill编辑器
        var quill = new Quill('#editor', {
            theme: 'snow',
            modules: {
                toolbar: [
                    [{ 'header': [1, 2, 3, false] }],
                    ['bold', 'italic', 'underline', 'strike'],
                    [{ 'color': [] }, { 'background': [] }],
                    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                    ['link', 'image'],
                    ['clean']
                ]
            },
            placeholder: '请详细描述您的旅游经历...'
        });

        // 提交日记
        async function submitDiary(event) {
            event.preventDefault();
            
            // 获取表单数据
            const title = document.getElementById('diaryTitle').value.trim();
            const destination = document.getElementById('destination').value.trim();
            const content = quill.root.innerHTML;
            
            // 验证数据
            if (!title || !destination || !content) {
                showError('请填写所有必填字段');
                return;
            }
            
            // 显示加载状态
            const loading = document.getElementById('loading');
            const submitButton = document.getElementById('submitButton');
            loading.style.display = 'block';
            submitButton.disabled = true;
            
            try {
                // 发送数据到后端
                const response = await fetch('/api/diary', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        title: title,
                        destination: destination,
                        content: content,
                        views: 0,  // 初始热度为0
                        average_rating: 3.0  // 初始评分为3
                    })
                });
                
                if (!response.ok) {
                    throw new Error('发布失败，请稍后重试');
                }
                
                // 后端只返回状态码，不尝试解析JSON
                // const result = await response.json();
                
                // 显示成功消息
                showSuccess('日记发布成功！');
                
                // 清空表单
                document.getElementById('diaryTitle').value = '';
                document.getElementById('destination').value = '';
                quill.setContents([]);
                
                // 3秒后返回仪表板
                setTimeout(() => {
                    window.location.href = 'dashboard.html';
                }, 3000);
                
            } catch (error) {
                showError(error.message);
            } finally {
                // 隐藏加载状态
                loading.style.display = 'none';
                submitButton.disabled = false;
            }
        }
        
        // 显示错误消息
        function showError(message) {
            const errorDiv = document.getElementById('errorMessage');
            const successDiv = document.getElementById('successMessage');
            errorDiv.textContent = message;
            errorDiv.style.display = 'block';
            successDiv.style.display = 'none';
        }
        
        // 显示成功消息
        function showSuccess(message) {
            const errorDiv = document.getElementById('errorMessage');
            const successDiv = document.getElementById('successMessage');
            successDiv.textContent = message;
            successDiv.style.display = 'block';
            errorDiv.style.display = 'none';
        }
        
        // 页面加载时检查用户登录状态
        async function checkLoginStatus() {
            const pageLoading = document.getElementById('pageLoading');
            const mainContainer = document.getElementById('mainContainer');
            
            try {
                const response = await fetch('/api/user/status');
                
                if (!response.ok) {
                    // 如果未登录，平滑过渡到登录页面
                    pageLoading.querySelector('p').textContent = '请先登录...';
                    await new Promise(resolve => setTimeout(resolve, 1000));
                    window.location.href = '/login.html';
                    return;
                }
                
                // 尝试解析JSON响应
                const data = await response.json();
                
                if (data.status === 'logged_in') {
                    // 登录成功，显示主内容
                    mainContainer.classList.add('loaded');
                    pageLoading.classList.add('hidden');
                } else {
                    // 未登录
                    pageLoading.querySelector('p').textContent = '请先登录...';
                    await new Promise(resolve => setTimeout(resolve, 1000));
                    window.location.href = '/login.html';
                }
                
            } catch (error) {
                console.error('检查登录状态失败:', error);
                pageLoading.querySelector('p').textContent = '加载失败，请刷新重试...';
                await new Promise(resolve => setTimeout(resolve, 2000));
                window.location.href = '/login.html';
            }
        }
        
        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', checkLoginStatus);
    </script>
</body>
</html> 
 